<script setup lang="jsx">
  import {watch,inject,ref,nextTick,reactive,computed} from 'vue'
import { Message, Modal } from '@arco-design/web-vue'
import {getDictData} from "@/utils/crud/dictNew.js";
import JsBarcode from 'jsbarcode';
import tool from "@/utils/tool.js";
import Print from "@/utils/print";

const columnsDist = inject('columnsDist')
const shipmentList=ref([])
const buttonType=ref(2)
const indeterminate = ref(false)
const checkedAll = ref(false)
const checkboxData = ref([])
const dataColumens=ref([])
watch(checkboxData,
    (newValues) => {
      console.log('newValues',newValues)
      tableList()
    }
)
const checkboxList=ref([{
  label:'运单条形码',
  value:'shipment_code'
},{
  label:'运单号',
  value:'shipment_no'
},{
  label:'客户单号',
  value:'client_reference'
},{
  label:'扩展单号',
  value:'ext_number'
},{
  label:'地址库编码',
  value:'address_lib_detail_id'
},{
  label:'用户名',
  value:'username'
},{
  label:'件数',
  value:'parcel_count'
},{
  label:'重量',
  value:'client_weight'
},{
  label:'体积',
  value:'client_volume'
},{
  label:'国家',
  value:'country'
},{
  label:'服务',
  value:'service_id'
},{
  label:'主品名',
  value:'main_name'
},{
  label:'PO Number',
  value:'po_no'
},{
  label:'报关方式',
  value:'exportwith'
},{
  label:'供应商服务',
  value:'supplier_desc'
},{
  label:'备注',
  value:'remark'
},{
  label:'入仓时间',
  value:'picking_at'
},{
  label:'联系人',
  value:'contact'
},{
  label:'联系人电话',
  value:'mobile'
}
])
//列表显示
const tableList=()=>{
  let list=[]
  let select = JSON.parse(JSON.stringify(checkboxList.value.filter(i => checkboxData.value.includes(i.value))))

  select.forEach(item => {
    let obj={
      title:item.label,
      dataIndex:item.value,
      slotName:item.value,
      width:70,
      align:'center',
    }
    list.push(obj)
  });
  dataColumens.value=list
}
//全选
const handleChangeAll = (value) => {
    indeterminate.value = false;
    if (value) {
      checkedAll.value = true;
      checkboxData.value=[]
      checkboxList.value.map((item,index)=>{
        checkboxData.value.push(item.value)
      })
     tool.local.set('print', checkboxList.value)
    } else {
      checkedAll.value = false;
      checkboxData.value = []
      tool.local.set('print', [])
    }
  }
  //多选选中
  const handleChange = (values) => {
    tool.local.set('print', values)
    if (values.length === checkboxList.value.length) {
      checkedAll.value = true
      indeterminate.value = false;
    } else if (values.length === 0) {
      checkedAll.value = false
      indeterminate.value = false;
    } else {
      checkedAll.value = false
      indeterminate.value = true;
    }
  }


const visible = ref(false)

 //一维码生成
 const qrCode=(index,shipment_no)=>{
  nextTick(() => {
      const canvas = document.getElementById('barcode-' + index);
    if(canvas){
        JsBarcode(canvas, shipment_no, {
        format: 'CODE128', // 指定条形码的格式
        width: 1, // 条的宽度
        height: 50, // 条形码的高度
        displayValue: false // 是否在条形码下方显示文本
      });
    }
  })
 } 

const printRef = ref()
const printLabel = () => {
  new Print(printRef.value,{noStyle:true,style:'@page{size:'+ ('A4') +';margin:0;}'})
}
  const onShow = async (value) => {
    visible.value = true
    shipmentList.value=value
    let printStting=tool.local.get('print')
    if(!printStting){
      handleChangeAll(true)
    }else{
      checkboxData.value=printStting
    }
  }


    const close = () => {
      visible.value = false
      buttonType.value=2
    }
defineExpose({ onShow })
</script>

<template>
  <a-drawer v-model:visible="visible" title="打印入仓单" v-if="visible" width="80%" @cancel="close" :footer="false">
        <a-row style="overflow: hidden;height: 100%;">
          <a-col span="6">
            <a-button type="primary" @click="printLabel">打印</a-button>
            <div style="margin-top: 10px;">类型</div>
            <a-radio-group type="button"  v-model="buttonType">
              <a-radio :value="1">单票打印</a-radio>
              <a-radio :value="2">合并打印</a-radio>
            </a-radio-group>
            <div style="display: flex; margin-top: 10px;">
              <a-checkbox :model-value="checkedAll" :indeterminate="indeterminate" @change="handleChangeAll" />
              <span style="margin-left: 10px;font-weight: bold;">全选</span>
            </div>
            <a-checkbox-group direction="vertical" v-model="checkboxData" @change="handleChange">
              <a-checkbox v-for="item in checkboxList" :value="item.value" :key="item.value">{{ item.label }}</a-checkbox>
            </a-checkbox-group>
          </a-col>
          <a-col span="18">
            <div ref="printRef" style="overflow-y: auto;">
              <div v-if="buttonType==2" class="print-item">
                <div style="text-align: center;font-weight: bold;font-size: 32px;margin-bottom: 20px;">入仓单</div>
                <div>
                  <table style="font-size: 12px; border-collapse: collapse; width: 98%; margin: 12px auto;">
                    <thead>
                      <tr>
                        <th v-for="(item, index) in dataColumens" :key="item.dataIndex" style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px; text-align: left;">
                          {{item.title }}
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(item, index) in shipmentList" :key="index">
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('shipment_code')">
                          <img style="width: 150px;" :id="'barcode-' + index" :data="qrCode(index,item.shipment_no)"></img>
                        </td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('shipment_no')">{{ item.shipment_no}}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('client_reference')">{{ item.client_reference}}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('ext_number')">{{ item.ext_number}}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('address_lib_detail_id')">{{ getDictData('attrApi', 'dicthelpApi_addressLibDetail', item.address.address_lib_detail_id, 7, columnsDist) }}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('username')">{{ item.user?.username}}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('parcel_count')">
                          <span v-if="item.status == 1 || item.volume_weight.parcel_count == item.volume_weight.parcel_total">{{item.volume_weight?.parcel_total ?? ''}}</span>
                          <span v-else>{{item.volume_weight.parcel_count + '/' + item.volume_weight.parcel_total}}</span>
                        </td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('client_weight')">{{ item.volume_weight?.client_weight ?? '' }}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('client_volume')">{{ item.volume_weight?.client_volume ?? '' }}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('country')">{{ item.address?.country ?? '' }}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('service_id')">{{getDictData('attrApi','dicthelpApi_service',item.admin_service_id,3,columnsDist)}}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('main_name')">{{ item.volume_weight?.main_name ?? '' }}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('po_no')">{{ item.po_no}}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('exportwith')">{{ getDictData('dictObj', 'exportwith', item.clearance?.exportwith, 2, columnsDist) }}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('supplier_desc')">{{item.third_order?.supplier.name}}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('remark')">{{ item.remark}}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('picking_at')">{{ item.picking_at}}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('contact')">{{ item.user?.contact ?? '' }}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('mobile')">{{ item.user?.mobile ?? '' }}</td>
                      </tr>
                  
                    </tbody>
                  </table>
                </div>

              <div style="text-align: center; color: #999; margin-top: 20px;margin-bottom: 100px;">
                <div>交接人：</div>
                <div>时间：</div>
              </div>
            </div>
            <div v-else-if="buttonType==1">
              <div v-for="(item, index) in shipmentList" :key="index" class="print-item">
                <div style="text-align: center;font-weight: bold;font-size: 32px;margin-bottom: 20px;">入仓单</div>
                <div>
                  <table style="font-size: 12px; border-collapse: collapse; width: 98%; margin: 12px auto;">
                    <thead>
                      <tr>
                        <th v-for="(itemInfo, indexInfo) in dataColumens" :key="itemInfo.dataIndex" style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px; text-align: left;">
                          {{itemInfo.title }}
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('shipment_code')">
                          <img style="width: 150px;" :id="'barcode-' + index" :data="qrCode(index,item.shipment_no)"></img>
                        </td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('shipment_no')">{{ item.shipment_no}}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('client_reference')">{{ item.client_reference}}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('ext_number')">{{ item.ext_number}}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('address_lib_detail_id')">{{ getDictData('attrApi', 'dicthelpApi_addressLibDetail', item.address.address_lib_detail_id, 7, columnsDist) }}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('username')">{{ item.user?.username}}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('parcel_count')">
                          <span v-if="item.status == 1 || item.volume_weight.parcel_count == item.volume_weight.parcel_total">{{item.volume_weight?.parcel_total ?? ''}}</span>
                          <span v-else>{{item.volume_weight.parcel_count + '/' + item.volume_weight.parcel_total}}</span>
                        </td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('client_weight')">{{ item.volume_weight?.client_weight ?? '' }}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('client_volume')">{{ item.volume_weight?.client_volume ?? '' }}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('country')">{{ item.address?.country ?? '' }}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('service_id')">{{getDictData('attrApi','dicthelpApi_service',item.admin_service_id,3,columnsDist)}}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('main_name')">{{ item.volume_weight?.main_name ?? '' }}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('po_no')">{{ item.po_no}}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('exportwith')">{{ getDictData('dictObj', 'exportwith', item.clearance?.exportwith, 2, columnsDist) }}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('supplier_desc')">{{item.third_order?.supplier.name}}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('remark')">{{ item.remark}}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('picking_at')">{{ item.picking_at}}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('contact')">{{ item.user?.contact ?? '' }}</td>
                        <td style="border: 1px solid rgb(173, 173, 173); padding: 4px 8px;" v-if="checkboxData.includes('mobile')">{{ item.user?.mobile ?? '' }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              <div style="text-align: center; color: #999; margin-top: 20px;margin-bottom: 100px;">
                <div>交接人：</div>
                <div>时间：</div>
              </div>
              </div>
              
            </div>
            
          </div>
          </a-col>
        </a-row>
      </a-drawer>
</template>
<style scoped>
.arco-drawer-body{
  overflow: hidden;
}
.arco-col{
  height: 100vh;
  overflow: auto;
  scrollbar-width: thin; /* 对于支持该属性的浏览器 */
  scrollbar-color: #999 #eee; /* 滚动条的颜色，前景和背景 */
}
</style>